<template>
	<view>
		<u-sticky bgColor="#fff">
			<view style="background-color: #F2F6FC;"><u-subsection :list="tags" mode="subsection" :current="tagIndex" @change="tagsClicked"></u-subsection></view>
		</u-sticky>
		<scroll-view
			:scroll-y="true"
			:scroll-x="false"
			:lower-threshold="50"
			@scrolltolower="zeroScrolltolower"
			v-show="tagIndex == 0"
			:enable-flex="false"
			style="width:100vw;bottom: 0px;top:40px;position: absolute;"
		>
			<view v-for="(item, index) in listZero.data" :key="item.messageId" v-show="item.show==true">
				<u-swipe-action>
					<u-swipe-action-item :options="itemActions" @click="del(item)">
						<u-cell @click="showMsg(item)">
							<view slot="title" style="font-size: 14px;color: #606266;">{{ item.messageId }}来自：{{ item.fromUserNickName }}</view>
							<view slot="label" style="font-size: 12px;color: #C0C4CC;">{{ item.createdTime }}</view>
							<u-avatar slot="icon" shape="square" size="35" :src="item.fromUserAvatar" customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</scroll-view>
		<scroll-view
			:scroll-y="true"
			:scroll-x="false"
			:lower-threshold="50"
			@scrolltolower="oneScrolltolower"
			v-show="tagIndex == 1"
			:enable-flex="false"
			style="width:100vw;bottom: 0px;top:40px;position: absolute;"
		>
			<view v-for="(item, index) in listOne.data" :key="item.messageId" v-show="item.show==true">
				<u-swipe-action>
					<u-swipe-action-item :options="itemActions" @click="del(item)">
						<u-cell @click="showMsg(item)">
							<view slot="title" style="font-size: 14px;color: #606266;">{{ item.messageId }}来自：{{ item.fromUserNickName }}</view>
							<view slot="label" style="font-size: 12px;color: #C0C4CC;">{{ item.createdTime }}</view>
							<u-avatar slot="icon" shape="square" size="35" :src="item.fromUserAvatar" customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</scroll-view>

		<!-- 隐藏组件 -->
		<u-modal :show="showPopup" :showConfirmButton="true" :showCancelButton="true" confirmText="回复" @confirm="repeat" @cancel="showPopup = false">
			<view slot="default" style="font-size:12px;width: 100%;">
				<u-row justify="space-between" gutter="10">
					<u-col span="2"><view>来自</view></u-col>
					<u-col span="22">
						<view>{{ item.fromUserNickName }}</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" gutter="10" :customStyle="{ 'margin-top': '20px' }">
					<u-col span="2"><view>内容</view></u-col>
					<u-col span="22">
						<view>{{ item.content }}</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" gutter="10" :customStyle="{ 'margin-top': '20px' }">
					<u-col span="2"><view>时间</view></u-col>
					<u-col span="22">
						<view>{{ item.createdTime }}</view>
					</u-col>
				</u-row>
			</view>
		</u-modal>

		<!-- 回复框 -->
		<u-modal :show="showRepeatPopup" :showConfirmButton="true" :showCancelButton="true" confirmText="提交" @confirm="submitRepeat" @cancel="showRepeatPopup = false">
			<view slot="default" style="font-size:12px;width: 100%;">
				<u-textarea placeholder="请输入内容" :value="repeatContent" :count="true" @input="inputRepeatContent"></u-textarea>
			</view>
		</u-modal>
		<!-- 删除框 -->
		<u-modal :show="showDelConfirm" title="提示" content="确定删除???" @confirm="submitDel"  :showConfirmButton="true" :showCancelButton="true" @cancel="showDelConfirm=false" >
			
		</u-modal>
	</view>
</template>

<script>
import { Toast } from '@/utils/common.js';
import { IMG_SERVER, Request, VITE_API_URL } from '@/utils/request.js';
export default {
	data() {
		return {
			itemActions: [
				{
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}
			],
			showPopup: false,
			showRepeatPopup: false,
			showDelConfirm:false,
			repeatContent: '',
			loading: false,
			tagIndex: 0,
			limit: 20,
			tags: [{ name: '未读', idx: 0 }, { name: '已读', idx: 1 }],
			listZero: { page: 1, data: [] }, //未读的信息列表
			listOne: { page: 1, data: [] }, //已读的信息列表
			item: {}
		};
	},
	//页面首次加载，之后不会触发
	onLoad(options) {
		console.log('isOpen is ', options.isOpen);
		this.tagIndex = options.isOpen == 'No' ? 0 : 1;
	},
	//每次都加载
	onShow() {
		this.loadUnOpenMsg(false);
		this.loadOpenedMsg(false);
	},
	methods: {
		//提交删除
		submitDel(){
			Toast.loadingT("提交中...");
			let _ = this;
			Request.del("/api/message/"+_.item.messageId,{}).then((res)=>{
				_.showDelConfirm = false;
				_.item.show = false;
				Toast.success("删除成功");
			});
		},
		del(val) {
			console.log(val);
			this.showDelConfirm = true;
			this.item = val;
		},
		//输入
		inputRepeatContent(val) {
			console.log(val);
			this.repeatContent = val;
		},
		//提交回复
		submitRepeat() {
			let _ = this;
			console.log(_.repeatContent);
			if (!_.repeatContent) {
				Toast.error('请填写回复内容');
				return;
			}
			Toast.loadingT('提交中...');
			Request.post('/api/message/repeat', {
				toUser: _.item.fromUser,
				content: _.repeatContent
			}).then(res => {
				_.showPopup = false;
				_.showRepeatPopup = false;
				Toast.success('回复成功');
			});
		},
		//显示信息
		showMsg(item) {
			console.log(item);
			this.showPopup = true;
			this.item = item;
			if (item.isOpen == 'No') {
				//未打开，设置为已打开
				Request.post('/api/message/open/' + item.messageId, {}).then(res => {});
			}
		},
		repeat() {
			this.showPopup = false;
			this.showRepeatPopup = true;
		},
		//tags点击事件
		tagsClicked(res) {
			this.tagIndex = res;
		},
		//加载未读信息列表
		loadUnOpenMsg(showLoading) {
			let _ = this;
			if (showLoading) {
				Toast.loadingT('加载中...');
			}
			Request.get('/api/message/mylist', { page: _.listZero.page, isOpen: 'No', limit: _.limit }).then(res => {
				let records = res.records;
				let total = res.total;
				for (let item of records) {
					item.fromUserAvatar = IMG_SERVER + item.fromUserAvatar;
					item.show = true;
				}
				let oldData = _.listZero.data;
				_.listZero.data = [];
				_.listZero.data = oldData.concat(records);
				setTimeout(() => {
					if (showLoading) {
						Toast.hideLoading();
					}
				}, 3000);
			});
		},
		zeroScrolltolower(e) {
			console.log(e);
			this.listZero.page++;
			this.loadUnOpenMsg(true);
		},
		//加载已读信息列表
		loadOpenedMsg(showLoading) {
			let _ = this;
			if (showLoading) {
				Toast.loadingT('加载中...');
			}
			Request.get('/api/message/mylist', { page: _.listZero.page, isOpen: 'Yes', limit: _.limit }).then(res => {
				let records = res.records;
				let total = res.total;
				for (let item of records) {
					item.fromUserAvatar = IMG_SERVER + item.fromUserAvatar;
					item.show = true;
				}
				let oldData = _.listOne.data;
				_.listOne.data = [];
				_.listOne.data = oldData.concat(records);
				setTimeout(() => {
					if (showLoading) {
						Toast.hideLoading();
					}
				}, 3000);
			});
		},
		oneScrolltolower(e) {
			console.log(e);
			this.listOne.page++;
			this.loadOpenedMsg(true);
		}
	}
};
</script>

<style></style>
